<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-card type="inner" title="云服务清单">
          <a-row :gutter="24">
            <a-col :span="10">
              <a-form-item label="机构" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['sysOrgCodeName',validatorRules.sysOrgCodeName]" :trigger-change="true" :disabled="status" />
                <a-input v-decorator="['sysOrgCode',validatorRules.sysOrgCode]" :trigger-change="true" hidden="true" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="10">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="结算时间">
                <a-input   v-decorator="['payDate', validatorRules.payDate]" disabled="status"/>
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="本期云服务费">
                <a-input ref="yearsMoney" v-decorator="[ 'yearsMoney', validatorRules.yearsMoney]" disabled="status" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="10">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="实际应付云服务费">
                <a-input ref="yearsPayMoney" v-decorator="[ 'yearsPayMoney']" disabled="status" />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="本期优惠服务费">
                <a-input ref="yearsSaveMoney" v-decorator="[ 'yearsSaveMoney', validatorRules.yearsSaveMoney]" disabled="status" />
              </a-form-item>
             </a-col>
          </a-row>
        </a-card>
      </a-form>

      <!-- 子表单区域 -->
<!--      <a-tabs defaultActiveKey="1" >-->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="服务器结算清单" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="jinanServicePayMoneyTable.loading"
            :columns="jinanServicePayMoneyTable.columns"
            :dataSource="jinanServicePayMoneyTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="false"/>
        </a-tab-pane>
        <a-tab-pane tab="优惠信息" :key="refKeys[1]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[1]"
            :loading="jinanGovernmentLedgerAttachedTable.loading"
            :columns="jinanGovernmentLedgerAttachedTable.columns"
            :dataSource="jinanGovernmentLedgerAttachedTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="false"/>
        </a-tab-pane>

      </a-tabs>

    </a-spin>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
<!--      <a-button type="primary" :loading="confirmLoading" @click="handleOk">结算</a-button>-->
    </template>
  </a-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import JDate from '@/components/jeecg/JDate'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"
  import JUpload from '@/components/jeecg/JUpload'

  export default {
    name: 'settlementFreeModel',
    mixins: [JEditableTableMixin],
    components: {
      JDate,
      JSelectDepart,
      JMultiSelectTag,
      JUpload
    },
    data() {
      return {
        payMoney:'',
        lastYearMoney:'',
        noSetTime:'',
        labelCol: {
          xs: { span: 22 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 18}
        },
        disableSubmit:false,
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          updateTime:{},
          office:{},
          principal:{},
          systemName:{},
          mainUses:{},
          tos:{},
        },
        refKeys: ['jinanGovernmentLedgerAttached', 'jinanGovernmentHistoryRemaks'],
        tableKeys:['jinanGovernmentLedgerAttached', 'jinanGovernmentHistoryRemaks'],
        activeKey:['jinanGovernmentLedgerAttached', 'jinanGovernmentHistoryRemaks'],
        // 服务器申请附表 优惠信息
        jinanGovernmentLedgerAttachedTable: {
          loading: false,
          dataSource: [],
          columns: [
            {  //这一个隐藏字段不能去掉，解决360浏览器不兼容问题
              title: '优惠项目',
              key: '',
              type: FormTypes.hidden,
              defaultValue: '',
              placeholder: '请输入${title}',
              align:"center",
            },
            {
              title: '优惠项目',
              key: 'thisProject',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
              align:"center",
            },
            {
              title: '金额',
              key: 'thisProjectMoney',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
              align:"center",
            },
            {
              title: '说明',
              key: 'remarks',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            },

          ]
        },
        //服务器信息
        jinanServicePayMoneyTable: {
          loading: false,
          dataSource: [],
          columns: [
            {  //这一个隐藏字段不能去掉，解决360浏览器不兼容问题
              title: '单位名称',
              key: '',
              type: FormTypes.hidden,
              defaultValue: '',
              placeholder: '请输入${title}',
              align:"center",
            },
            {
              title: '单位名称',
              key: 'officeName',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            },
            {
              title: '系统数量',
              key: 'sysNum',
              type: FormTypes.inputNumber,
              defaultValue: '',
              align:"center",
            },
            {
              title: '云服务器数量',
              key: 'num',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            }, {
              title: '年云服务费',
              key: 'yearsMoney',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            }, {
              title: '本期在总线时长',
              key: 'payTimeDate',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            }, {
              title: '本期云服务费',
              key: 'thisProjectMoney',
              type: FormTypes.input,
              defaultValue: '',
              align:"center",
            },

          ]
        },

        url: {
          add: "/jinanDredge/dredgeMain/pay",
          edit: "/jinanDredge/dredgeMain/pay",
          jinanGovernmentLedgerAttached: {
            orderCustomerList: "/jinanCloud/cloudServiceProject/historyList",
            jinanServicePayList: "/jinanCloud/cloudServiceProject/servicePayYearMoneyList",
          },
        }
      }
    },
    methods: {

      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval =pick(this.model, 'sysOrgCode', 'sysOrgCodeName','payDate',  'yearsMoney', 'yearsSaveMoney', 'yearsPayMoney',);
      this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { accountId: this.model.id }
          let param = { monyId: this.model.id }
          this.requestSubTableData(this.url.jinanGovernmentLedgerAttached.orderCustomerList, params, this.jinanGovernmentLedgerAttachedTable)
          this.requestSubTableData(this.url.jinanGovernmentLedgerAttached.jinanServicePayList, param, this.jinanServicePayMoneyTable)
          // this.requestSubTableData(this.url.jinanGovernmentLedgerAttached.jinanServicePayList, params, this.jinanServicePayMoneyTable)
        }
      },
      /** 整理成formData */
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
    }
  }
</script>

<style scoped>
</style>